<template>
  <div>
    <el-form class="f" :model="form" ref="form" label-width="120px" label-position="right" :rules="rules">
      <v-form-title title="修改登录密码"/>
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input class="line-input" type="password" v-model="form.oldPassword" placeholder="请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input class="line-input" type="password" v-model="form.newPassword" placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input class="line-input" type="password" v-model="form.confirmPassword" placeholder="请再次输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="手机验证码" prop="verificationCode">
        <el-input class="line-input" maxlength="6" v-model="form.verificationCode" placeholder="请输入手机验证码">
          <v-message-code slot="suffix" @click.native="getMessageCode" ref="messageCode" class="edit-el-intput-suffix"
                          :phoneNum="userInfo.phone"></v-message-code>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="opera">
      <el-button type="primary" @click="checkForm">确认修改</el-button>
    </div>
  </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator'
    import vFormTitle from '@/components/form-title'
    import vMessageCode from '@/components/message-code'
    import md5 from 'md5'

    @Component({
        components: {
            vFormTitle, vMessageCode
        }
    })
    export default class Base extends Vue {
        @Prop() userInfo

        form = {
            verificationCode: '',
            confirmPassword: '',
            newPassword: '',
            oldPassword: ''
        }
        rules = {
            verificationCode: [
                {required: true, message: '请输入短信验证码', trigger: 'blur'}
            ],
            confirmPassword: [
                {required: true, message: '请再次输入密码', trigger: 'blur'},
                {validator: this.testConfirmPassword, trigger: 'blur'}
            ],
            newPassword: [
                {required: true, message: '请输入您的新密码', trigger: 'blur'}
            ],
            oldPassword: [
                {required: true, message: '请输入您的旧密码', trigger: 'blur'}
            ]
        }

        testConfirmPassword (rule, value, cb) {
            if (this.form.newPassword === '') {
                cb(new Error('请先输入密码'))
            } else {
                if (value === this.form.newPassword) {
                    cb()
                } else {
                    cb(new Error('您两次输入的密码不一致,请重新输入'))
                }
            }
        }

        getMessageCode () {
            this.$refs.messageCode.start()
        }

        checkForm () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.submitForm()
                }
            })
        }

        resetForm () {
            this.$refs.form.resetFields()
        }

        async submitForm () {
            let f = {
                ...this.form,
                confirmPassword: md5(this.form.confirmPassword).toLocaleUpperCase(),
                oldPassword: md5(this.form.oldPassword).toLocaleUpperCase(),
                newPassword: md5(this.form.newPassword).toLocaleUpperCase()
            }
            let res: AjaxResponse = await this.$axios.put('g/gateway/member/changepassword', f)
            this.$utils.tips(res)
            if (res.responseCode === 200) {
                this.$refs.form.resetFields()
                this.$router.push('/login')
            }
        }
    }
</script>

<style lang="less" scoped>
  .f {
    width: 1180px;
    margin: 0 auto;
    padding-top: 60px;
  }

  .opera {
    text-align: center;
    margin-top: 100px;
  }
</style>
